<template>
	<view id="home" :data-theme="theme" :style="[pageStyle]">
		<!-- <tui-skeleton v-if="showSkeleton"></tui-skeleton> -->
		<!-- 有网内容 -->
		<view v-if="!errorNetwork">
			<view class="container">
				<!-- 用户信息区域 -->
				<view class="user-section">
					<view class="user-info">
						<image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
						<view class="user-details">
							<view class="level-badge">Lv.1</view>
							<text class="username">kafuka</text>
						</view>
					</view>

					<view class="balance-section">
						<view class="balance">
							<text class="currency">¥</text>
							<text class="amount">0</text>
						</view>
						<view class="action-buttons">
							<button class="btn-recharge">充值</button>
							<button class="btn-withdraw">提现</button>
						</view>
					</view>

					<view class="task-progress">
						<text class="task-text">投注任务</text>
						<text class="progress-text">0/0</text>
					</view>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: '0%' }"></view>
					</view>
				</view>

				<!-- 游戏区域 -->
				<view class="games-section">
					<view class="section-title">大家在玩</view>

					<view class="games-grid">
						<view class="game-item" v-for="(game, index) in games" :key="index">
							<image class="game-icon" :src="game.icon" mode="aspectFill"></image>
							<text class="game-name">{{ game.name }}</text>
						</view>
					</view>

					<!-- 最新开奖 -->
					<view class="latest-result">
						<image class="result-icon" src="/static/latest-win.png"></image>
						<view class="result-info">
							<text class="result-code">c7**</text>
							<text class="result-game">澳门五分彩</text>
							<text class="result-amount">喜中 ¥ 654.16</text>
						</view>
						<text class="result-time">2分钟前</text>
					</view>

					<!-- 充值提示 -->
					<view class="recharge-notice">
						<text class="notice-text">各位会员如需充值可在APP点击我的页面</text>
						<text class="notice-text">直接点击联系客服进行充值</text>
					</view>
				</view>

				<!-- 高频彩区域 -->
				<view class="high-freq-section">
					<view class="section-title">高频彩</view>

					<view class="lottery-grid">
						<view class="lottery-item" v-for="(lottery, index) in lotteries" :key="index">
							<view class="lottery-info">
								<text class="lottery-name">{{ lottery.name }}</text>
								<text class="lottery-period">全天 {{ lottery.periods }} 期</text>
							</view>
							<image class="lottery-logo" :src="lottery.logo" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<!-- 11选5 -->
				<view class="high-freq-section">
					<view class="section-title">11选5</view>

					<view class="lottery-grid">
						<view class="lottery-item" v-for="(lottery, index) in lotteryList" :key="index">
							<view class="lottery-info">
								<text class="lottery-name">{{ lottery.name }}</text>
								<text class="lottery-period">全天 {{ lottery.periods }} 期</text>
							</view>
							<image class="lottery-logo" :src="lottery.logo" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<!-- 低频彩 -->
				<view class="high-freq-section">
					<view class="section-title">低频彩</view>

					<view class="lottery-grid">
						<view class="lottery-item" v-for="(lottery, index) in lotteryList1" :key="index">
							<view class="lottery-info">
								<text class="lottery-name">{{ lottery.name }}</text>
								<text class="lottery-period">全天 {{ lottery.periods }} 期</text>
							</view>
							<image class="lottery-logo" :src="lottery.logo" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 数字彩 -->
				<view class="high-freq-section">
					<view class="section-title">数字彩</view>

					<view class="lottery-grid">
						<view class="lottery-item" v-for="(lottery, index) in lotteryList2" :key="index">
							<view class="lottery-info">
								<text class="lottery-name">{{ lottery.name }}</text>
								<text class="lottery-period">全天 {{ lottery.periods }} 期</text>
							</view>
							<image class="lottery-logo" :src="lottery.logo" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 断网内容 -->
		<view v-else>
			<view class="error-network">
				<image class="img" :src="urlDomain + 'crmebimage/presets/error-network.png'"></image>
				<view class="title">网络连接断开</view>
				<view class="con">
					<view class="label">请检查情况：</view>
					<view class="item">· 在设置中是否已开启网络权限</view>
					<view class="item">· 当前是否处于弱网环境</view>
					<view class="item">· 版本是否过低，升级试试吧</view>
				</view>
				<view class="btn" @click="reconnect">重新连接</view>
			</view>
		</view>

		<!-- 底部导航距离，做兼容处理的-->
		<view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		<pageFooter></pageFooter>
		<!-- 优惠券弹窗 -->
		<coupon-dialog :urlDomain="urlDomain" v-if="couponModal" :couponModal="couponModal"
			@on-close="closeDialog"></coupon-dialog>
	</view>
</template>

<script>
import Cache from '../../utils/cache';
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import liveBroadcast from '@/components/homeIndex/liveBroadcast';
import merchantList from '@/components/homeIndex/merchant.vue'
import homeComb from '@/components/homeIndex/homeComb';
import recommend from "@/components/base/recommend.vue";
import seckillData from "@/components/homeIndex/seckill.vue";
import aTip from './components/addTips.vue';
import couponDialog from "@/components/homeIndex/couponDialog.vue"
import coupon from "@/components/homeIndex/coupon.vue";
import menus from "@/components/homeIndex/menus.vue";
import pictureCube from '@/components/homeIndex/pictureCube'
import news from '@/components/homeIndex/news'
import goodList from '@/components/homeIndex/goodList'
import guide from '@/components/homeIndex/guide';
import articleList from '@/components/homeIndex/articleList'
import swiperBg from '@/components/homeIndex/swiperBg'
import headerSearch from '@/components/homeIndex/headerSearch';
import cateNav from '@/components/homeIndex/cateNav';
import richTextEditor from '@/components/homeIndex/richTextEditor';
import shortVideo from '@/components/homeIndex/video';
import homeTab from '@/components/homeIndex/homeTab';
import discover from '@/components/homeIndex/discover';
import blankPage from '@/components/homeIndex/blankPage';
import homeTitle from '@/components/homeIndex/title';
import hotSpot from '@/components/homeIndex/hotSpot.vue';
import group from "@/components/homeIndex/group.vue";
import pageFooter from "@/components/pageFooter/index.vue";
import intergralShop from "@/components/homeIndex/intergralShop.vue";
import {
	getIndexData,
	getTheme,
	getAppVersion,
	getCategoryThird,
	getDiy
} from '@/api/api.js';
// #ifdef MP-WEIXIN || APP-PLUS
import {
	getTemlIds
} from '@/api/api.js';
// #endif
import {
	getShare
} from '@/api/public.js';
import {
	mapGetters
} from "vuex";
import {
	silenceBindingSpread,
} from '@/utils/index.js';
import animationType from '@/utils/animationType.js'
import {
	goProductDetail
} from "../../libs/order";

const arrTemp = ["beforePay", "afterPay", "createBargain", "pink"];
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
let app = getApp();
export default {
	computed: mapGetters(['isLogin', 'uid', 'globalData', 'bottomNavigationIsCustom']),
	components: {
		aTip,
		merchantList,
		homeComb,
		recommend,
		tuiSkeleton,
		seckillData,
		pageFooter,
		liveBroadcast,
		couponDialog,
		coupon,
		menus,
		pictureCube,
		news,
		goodList,
		articleList,
		swiperBg,
		headerSearch,
		cateNav,
		guide,
		richTextEditor,
		shortVideo,
		homeTab,
		discover,
		blankPage,
		homeTitle,
		hotSpot,
		group,
		intergralShop
	},
	data() {
		return {
			urlDomain: this.$Cache.get("imgHost"),
			isNoCommodity: false,
			isScrolled: false, //是否开始滚动
			categoryId: 0,
			showSkeleton: true, //骨架屏显示隐藏
			isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
			statusBarHeight: statusBarHeight,
			navIndex: 0, //判断首页显示内容，1显示分类页和商品，0首页
			site_name: '', //首页title
			configApi: {}, //分享类容配置
			listActive: 0, // 当前选中项
			theme: app.globalData.theme,
			imgHost: '', //图片域名地址
			appUpdate: {},
			wxText: "点击添加到我的小程序，微信首页下拉即可访问商城。",
			locationContent: '授权位置信息，提供完整服务',
			sortMpTop: 0,
			// #ifdef APP-PLUS || MP
			isFixed: true,
			// #endif
			// #ifdef H5
			isFixed: false,
			// #endif
			domOffsetTop: 50,
			sortList: [],
			sortMarTop: 0,
			domHeight: 0,
			cateNavActive: 0,
			couponModal: false,
			styleConfig: [], //DIY数据
			diyId: 0, //DIYID
			homeCombData: {}, //组合组件数据
			showCateNav: false, //是否显示分类导航组件
			cateNavData: {}, //分类导航组件数据
			showHomeComb: false, //是否显示组合
			showHeaderSerch: false, //是否显示搜索框
			headerSerchCombData: {}, //搜索框对象
			isShowTitle: false, //是否显示头部标题，同时也判断是否展示分类下的商品列表
			bgColor: '', //背景颜色
			bgPic: '', //背景图片
			bgTabVal: '', //背景图片样式
			windowHeight: 0,
			pageStyle: {},
			isDefault: 1, //是否首页，1是，0不是
			errorNetwork: false, //是否有网络
			bgInfo: {
				colorPicker: '#f5f5f5',
				isBgColor: 1,
			},
			games: [
				{ name: '澳门五分彩', icon: '/static/game1.png' },
				{ name: '香港五分彩', icon: '/static/game2.png' },
				{ name: '波兰五分彩', icon: '/static/game3.png' },
				{ name: '河内三分彩', icon: '/static/game4.png' }
			],
			lotteries: [
				{ name: '澳门五分彩', periods: 288, logo: '/static/lottery1.png' },
				{ name: '香港五分彩', periods: 288, logo: '/static/lottery2.png' },
				{ name: '波兰五分彩', periods: 288, logo: '/static/lottery3.png' },
				{ name: '河内三分彩', periods: 480, logo: '/static/lottery4.png' }
			],
			lotteryList: [
				{ name: '澳门五分彩', periods: 288, logo: '/static/lottery1.png' },
				{ name: '香港五分彩', periods: 288, logo: '/static/lottery2.png' },
				{ name: '波兰五分彩', periods: 288, logo: '/static/lottery3.png' },
				{ name: '河内三分彩', periods: 480, logo: '/static/lottery4.png' }
			],
			lotteryList1: [
				{ name: '澳门五分彩', periods: 288, logo: '/static/lottery1.png' },
				{ name: '香港五分彩', periods: 288, logo: '/static/lottery2.png' },
				{ name: '波兰五分彩', periods: 288, logo: '/static/lottery3.png' },
				{ name: '河内三分彩', periods: 480, logo: '/static/lottery4.png' }
			],
			lotteryList2: [
				{ name: '澳门五分彩', periods: 288, logo: '/static/lottery1.png' },
				{ name: '香港五分彩', periods: 288, logo: '/static/lottery2.png' },
				{ name: '波兰五分彩', periods: 288, logo: '/static/lottery3.png' },
				{ name: '河内三分彩', periods: 480, logo: '/static/lottery4.png' }
			],
			lotteryList3: [
				{ name: '澳门五分彩', periods: 288, logo: '/static/lottery1.png' },
				{ name: '香港五分彩', periods: 288, logo: '/static/lottery2.png' },
				{ name: '波兰五分彩', periods: 288, logo: '/static/lottery3.png' },
				{ name: '河内三分彩', periods: 480, logo: '/static/lottery4.png' }
			],
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		// #ifdef APP-PLUS
		setTimeout(() => {
			uni.reLaunch({
				url: "/pages/index/index"
			});
			uni.stopPullDownRefresh();
		}, 1000)
		// #endif
	},
	onLoad(options) {
		// #ifdef APP-PLUS
		//app刚进入检测有无网络
		this.snycNetWork();
		this.getInitTheme();
		//APP版本检测
		this.appVersionConfig();
		// #endif

		//获取浏览器id
		// this.getOptionData(options)

		//首页数据加载
		this.getIndexConfig();

		let that = this;
		this.$nextTick(function () {
			uni.getSystemInfo({
				success: function (res) {
					that.windowHeight = res.windowHeight;
				}
			});
		})
		// #ifdef MP || APP-PLUS
		// this.getTemlIds()
		// #endif
	},
	onShow() {
		let self = this;
		// #ifdef APP-PLUS
		setTimeout(() => {
			if (self.appUpdate.openUpgrade == 'true') {
				self.appVersionConfig();
			}
		}, 1000)
		// #endif

		//新人礼的展示判断
		let newGift = self.$Cache.get('newGift') ? JSON.parse(self.$Cache.get('newGift')) : [];
		self.couponModal = newGift.length ? true : false;
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit('scroll');
		if (e.scrollTop > this.domOffsetTop) {
			this.isScrolled = true;
		}
		if (e.scrollTop < this.domOffsetTop) {
			this.$nextTick(() => {
				this.isScrolled = false;
			});
		}
	},
	methods: {
		handleMenuClick(menu) {
			console.log('点击菜单:', menu.name)
			// 处理菜单点击事件
		},

		//获取扫码或者浏览器传来的值
		getOptionData(options) {
			let diyid = 0;
			if (options.hasOwnProperty('id') || options.scene) {
				if (options.scene) { // 仅仅小程序扫码进入
					let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
					this.$store.commit('Change_Spread', value.sd);
					//分销绑定
					silenceBindingSpread(this.isLogin, value.sd);
					diyid = value.id ? value.id : 0;
				} else {
					diyid = options.id ? options.id : 0;
					this.$store.commit('Change_Spread', options.sd);
					//分销绑定
					silenceBindingSpread(this.isLogin, options.sd);
				}
			}
			//diy数据加载
			this.diyData(diyid, false);
		},
		//备案授权跳转
		toInternet() {
			window.open('https://beian.miit.gov.cn/#/Integrated/index')
		},
		getInitTheme() {
			let that = this;
			// 主题变色
			getTheme().then(resP => {
				this.$Cache.set('theme', `theme${Number(resP.data.value)}`);
			})
		},
		//app刚进入检测有无网络
		snycNetWork() {
			uni.getNetworkType({
				success: res => {
					//res.networkType === 'none'无网络
					this.errorNetwork = res.networkType === 'none';
					//如果没有网络，清除骨架屏
					if (this.errorNetwork) this.reloadData();
				}
			});
		},
		// 断网后重新链接
		reconnect() {
			uni.getNetworkType({
				success: res => {
					this.errorNetwork = res.networkType === 'none';
					if (!this.errorNetwork) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index"
							});
						}, 1000)
					}
				}
			});
		},
		/**
		 * 获取DIY
		 * @param {number} id
		 * @param {boolean} type 区分是否是微页面
		 */
		diyData(id, type) {
			let that = this;
			that.styleConfig = []
			uni.showLoading({
				title: '加载中...'
			});
			getDiy(id).then(res => {
				that.errorNetwork = false;
				uni.setNavigationBarTitle({
					title: res.data.title
				});
				uni.setNavigationBarColor({
					//必须要16进制小写
					frontColor: res.data.titleColor,
					backgroundColor: res.data.titleBgColor.toString().toLowerCase(),
				})
				let data = res.data;
				that.diyId = res.data.id;
				that.isDefault = data.isDefault; //是否是首页，1是，0不是
				that.styleConfig = that.$util.objToArr(res.data.value);
				this.bgInfo.isBgColor = data.isBgColor
				this.bgInfo.colorPicker = data.colorPicker
				that.pageStyle = {
					'background-color': data.isBgColor === 1 ? res.data.colorPicker : '',
					'background-image': data.isBgPic === 1 ? `url(${res.data.bgPic})` : '',
					'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
					'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
				};
				uni.hideLoading();
				if (type) {
					that.styleConfig.forEach((item) => {
						if (item.name == 'headerSerch' || item.name == 'homeComb' || item.name ==
							'tabNav') {
							that.styleConfig.splice(index, 1);
						}
					});
				} else {
					that.styleConfig.forEach((item) => {
						if (item.name === 'tabNav') {
							that.showCateNav = true;
							that.cateNavData = item;
						}
						if (item.name === 'homeComb') {
							that.showHomeComb = true
							that.homeCombData = item;
						}
						if (item.name === 'headerSerch') {
							that.showHeaderSerch = true
							that.headerSerchCombData = item;
						}
					});
				}
				setTimeout(() => {
					that.isNodes++;
				}, 100);
				//新人礼的展示判断
				// let newGift = that.$Cache.get('newGift') ? JSON.parse(that.$Cache.get('newGift')) : [];
				// uni.getImageInfo({
				// 	src: `${that.urlDomain}crmebimage/presets/coupon_modal_bg.png`,
				// 	success: function(image) {
				// 		that.couponModal = newGift.length ? true : false;
				// 	}
				// });
			}).catch(err => {
				return that.$util.Tips({
					title: err
				});
				uni.hideLoading();
			});
		},
		bindMore() {
			uni.setStorageSync('cateNavActive', this.cateNavActive);
			uni.setStorageSync('categoryId', this.categoryId);
			// uni.switchTab({
			// 	url: `/pages/goods_cate/index`
			// })
			uni.switchTab({
				url: `/pages/otc/index`
			})
		},
		getRecommendLength(e) {
			this.isNoCommodity = e == 0 ? true : false;
		},
		// 导航分类切换
		changeTab(index, item) {
			//type=0微页面，1分类，2首页
			this.cateNavActive = index;
			if (item.type == 1) {
				this.navIndex = 1;
				if (!item.val) {
					this.sortList = [];
					this.categoryId = 0;
					this.$util.Tips({
						title: "请在平台端选择商品分类！确保加载商品分类数据。"
					});
					return;
				} else {
					getCategoryThird(item.val).then(res => {
						this.sortList = res.data;
						// #ifdef H5
						self.sortMarTop = 10;
						// #endif
					});
					this.categoryId = item.val;
					this.isShowTitle = false;
				}
			} else if (item.type == 0) {
				this.navIndex = 0;
				this.isShowTitle = true;
				this.categoryId = 0;
				if (!item.val) {
					return this.$util.Tips({
						title: "请在平台端选择微页面链接！确保加载微页面数据。"
					});
				} else {
					this.styleConfig = [];
					this.diyData(item.val, true);
				}
			} else {
				this.categoryId = 0;
				this.navIndex = 0;
				this.styleConfig = [];
				this.diyData(item.val, false);
			}
		},
		toNewsList() {
			uni.navigateTo({
				animationType: animationType.type,
				animationDuration: animationType.duration,
				url: '/pages/goods/news_list/index'
			})
		},
		//清除骨架屏
		reloadData() {
			this.showSkeleton = false;
		},
		getElementData(el, callback) {
			uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
				callback(data[0]);
			});
		},
		xieyiApp() {
			uni.navigateTo({
				url: '/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容'
			})
		},
		// #ifdef APP-PLUS
		xieyiApp() {
			uni.navigateTo({
				animationType: animationType.type,
				animationDuration: animationType.duration,
				url: '/pages/users/web_page/index?webUel=https://admin.java.crmeb.net/useragreement/xieyi.html&title=协议内容'
			})
		},
		// #endif
		// #ifdef MP || APP-PLUS
		getTemlIds() {
			for (var i in arrTemp) {
				this.getTem(arrTemp[i]);
			}
		},
		getTem(data) {
			getTemlIds({
				type: data
			}).then(res => {
				if (res.data) {
					let arr = res.data.map((item) => {
						return item.tempId
					})
					wx.setStorageSync('tempID' + data, arr);
				}
			});
		},
		// #endif
		// 首页数据
		getIndexConfig: function () {
			let that = this;
			getIndexData().then(res => {
				let imgHost = res.data.logoUrl.split('crmebimage')[0];
				that.imgHost = imgHost;
				that.$Cache.set('imgHost', imgHost + '/');
				// #ifdef H5 || APP-PLUS
				that.$store.commit("SET_CHATURL", res.data.yzfUrl);
				Cache.set('chatUrl', res.data.yzfUrl);
				// #endif
				Cache.setItem({
					name: 'platChatConfig',
					value: {
						servicePhone: res.data.consumerHotline, //客服电话
						serviceLink: res.data.consumerH5Url, //云智服
						serviceType: res.data.consumerType //客服类型四选一
					}
				});
				this.reloadData();
			}).catch(err => {
				return this.$util.Tips({
					title: err
				});
			});
		},
		appVersionConfig() {
			var that = this;
			//app升级
			// 获取本地应用资源版本号
			getAppVersion().then(res => {
				that.$set(that.appUpdate, 'androidAddress', res.data.androidAddress);
				that.$set(that.appUpdate, 'appVersion', res.data.appVersion);
				that.$set(that.appUpdate, 'iosAddress', res.data.iosAddress);
				that.$set(that.appUpdate, 'openUpgrade', res.data.openUpgrade);
				plus.runtime.getProperty(plus.runtime.appid, function (inf) {
					let nowVersion = (inf.version).split('.').join('');
					let appVersion = (res.data.appVersion).split('.').join('');
					uni.getSystemInfo({
						success: (res) => {
							if (appVersion > nowVersion) {
								uni.showModal({
									title: '更新提示',
									content: '发现新版本，是否前去下载?',
									showCancel: that.appUpdate.openUpgrade == '1' ?
										true : false,
									cancelColor: '#eeeeee',
									confirmColor: '#FF0000',
									success(response) {
										if (response.confirm) {
											switch (res.platform) {
												case "android":
													plus.runtime.openURL(that
														.appUpdate
														.androidAddress);
													break;
												case "ios":
													plus.runtime.openURL(encodeURI(
														that.appUpdate
															.iosAddress));
													break;
											}

										}
									}
								});
							}
						}
					})
				});
			})
		},
		shareApi: function () {
			getShare().then(res => {
				this.$set(this, 'configApi', res.data);
				this.$set(this, "site_name", res.data.title);
				uni.setNavigationBarTitle({
					title: this.site_name
				})
				// #ifdef H5
				this.setOpenShare(res.data);
				// #endif
			})
		},
		// 微信分享；
		setOpenShare: function (data) {
			let that = this;
			if (that.$wechat.isWeixin()) {
				let configAppMessage = {
					desc: data.synopsis,
					title: data.title,
					link: location.href,
					imgUrl: data.img
				};
				that.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
					configAppMessage);
			}
		},
		stopTouchMove() {
			return true //禁止新闻swiper手动滑动
		},
		closeDialog() {
			this.couponModal = false;
			this.$Cache.clear('newGift');
		},
		goDetail(item) {
			goProductDetail(item.id, 0, '')
		},
	},
	mounted() {
		let query = uni.createSelectorQuery().in(this);
		query.select("#home").boundingClientRect();
		query.exec(res => {
			this.domHeight = res[0].height;
		})
	},
	onReachBottom() {
		// this.$refs.recommendIndex.get_host_product();
	},
	/**
	 * 用户点击右上角分享
	 */
	// #ifdef MP
	onShareAppMessage: function () {
		return {
			title: this.configApi.title,
			imageUrl: this.configApi.img,
			desc: this.configApi.synopsis,
			path: `/pages/index/index?sd=${this.uid}`
		};
	}
	// #endif
}
</script>
<style>
page {
	height: auto;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* #ifdef H5 */
	background-color: #fff;
	/* #endif */

}
</style>
<style lang="scss" scoped>
.error-network {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding-top: 40rpx;
	background: #fff;
	padding-top: 30%;

	.img {
		width: 414rpx;
		height: 336rpx;
	}

	.title {
		position: relative;
		top: -40rpx;
		font-size: 32rpx;
		color: #666;
	}

	.con {
		font-size: 24rpx;
		color: #999;

		.label {
			margin-bottom: 20rpx;
		}

		.item {
			margin-bottom: 20rpx;
		}
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 508rpx;
		height: 86rpx;
		margin-top: 100rpx;
		border: 1px solid #d74432;
		color: #e93323;
		font-size: 30rpx;
		border-radius: 120rpx;
	}
}

.container {
	background-color: #2c2c2c;
	min-height: 100vh;
	color: white;
}

.user-section {
	padding: 20rpx;
	background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.level-badge {
	background-color: #ff6600;
	color: white;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	margin-bottom: 8rpx;
}

.username {
	font-size: 32rpx;
	font-weight: bold;
}

.balance-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.balance {
	display: flex;
	align-items: baseline;
}

.currency {
	font-size: 40rpx;
	color: #ffd700;
	margin-right: 10rpx;
}

.amount {
	font-size: 60rpx;
	font-weight: bold;
	color: #ffd700;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
}

.btn-recharge,
.btn-withdraw {
	padding: 16rpx 32rpx;
	border-radius: 25rpx;
	border: none;
	font-size: 28rpx;
	font-weight: bold;
}

.btn-recharge {
	background-color: #ff6600;
	color: white;
}

.btn-withdraw {
	background-color: #4a90e2;
	color: white;
}

.task-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
	font-size: 28rpx;
	color: #999;
}

.progress-bar {
	height: 8rpx;
	background-color: #444;
	border-radius: 4rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background-color: #ff6600;
	transition: width 0.3s ease;
}

.games-section {
	background-color: #f5f5f5;
	padding: 30rpx 20rpx;
	color: #333;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	color: #333;
	border-left: 6rpx solid #ff6600;
	padding-left: 15rpx;
}

.games-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30rpx;
	margin-bottom: 40rpx;
}

.game-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.game-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-bottom: 15rpx;
}

.game-name {
	font-size: 24rpx;
	color: #666;
}

.latest-result {
	display: flex;
	align-items: center;
	background-color: white;
	padding: 20rpx;
	border-radius: 15rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.result-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.result-info {
	flex: 1;
}

.result-code {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
}

.result-game {
	font-size: 24rpx;
	color: #666;
	display: block;
}

.result-amount {
	font-size: 28rpx;
	color: #ff6600;
	font-weight: bold;
	display: block;
}

.result-time {
	font-size: 24rpx;
	color: #999;
}

.recharge-notice {
	background-color: #fff3e0;
	padding: 20rpx;
	border-radius: 10rpx;
	border-left: 6rpx solid #ff6600;
}

.notice-text {
	display: block;
	font-size: 28rpx;
	color: #ff6600;
	line-height: 1.5;
	font-weight: bold;
}

.high-freq-section {
	background-color: #f5f5f5;
	padding: 30rpx 20rpx;
	color: #333;
}

.lottery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.lottery-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 30rpx;
	border-radius: 15rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.lottery-info {
	flex: 1;
}

.lottery-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.lottery-period {
	font-size: 24rpx;
	color: #999;
}

.lottery-logo {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
</style>
